<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

        <style>
             *{
                 margin: 0;
                 padding: 0;
             }
             .banner {
        width: 600px;
        height: 400px;
        border: 5px solid black;
        margin: 100px auto;
        overflow: hidden;
        cursor: pointer;
        position: relative;
    }

    .banner .slide {
        width: 4000px;
        height: 400px;
        position: absolute;
        left: -600px;
    }
    .banner .slide  {
        width: 600px;
        height: 400px;
        line-height: 400px;
        text-align: center;
        float: left;
        left: 10px;
        font-size: 72px;
        color: white;
    }
    
    .banner .dots{
        width: 100px;
        height: 30px;
        position: absolute;
        bottom: 0px;
        left: 50%;
        margin-left: -50px;
        z-index: 2;/*让圆点显示在轮播图上面*/
    }
    .banner .dots .dot{
        /*圆点的一些样式*/
        width:20px;
        height: 20px; 
        float: left;
        border-radius: 50%;
        margin:5px 6px;
        background-color: rgba(7,17,27,0.4);
        box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
        cursor:pointer;

    }
    .banner .dots .active{
        /*小圆点高亮的样式*/
        box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
        background-color: #fff;
    }
    .banner .arrow{
    /*左箭头*/
        width: 0;
        height: 0;
        border-right: 30px solid rgba(255,255,255,.5);
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
        position: absolute;
        left:0;
        top: 50%;
        margin-top: -30px;
        z-index: 2;
    }
    .banner .arrow:hover{
        /*鼠标移动到箭头时候的样式*/
        border-right-color:white ;
    }
    .banner .next{
        /*右箭头*/
        left:auto;
        right: 0;
        top: 50%;
        margin-top: -30px;
        transform: rotate(180deg);
        z-index: 2;
    }

        </style>


</head>
<body>
                
      <div class="banner">
         <div class="slide">

          <img src="/1.jpg"  id="i">
        

         </div>

         <div class="dots">
             <div class="dot active" id="yuan"></div>
             <div class="dot" id="yuan"></div>
             <div class="dot" id="yuan"></div>
         </div>
         <div class="arrow next" id="z"></div>
         <div class="arrow prev" id="y"></div>
      </div>            

            <script>
   $(function()
     {
           index = 1;
         tup();  
        //鼠标停止
        $(".slide").bind("mouseover",function()
        {
          
            clearInterval(timer);
        })
        
        //鼠标开放
        $(".slide").bind("mouseleave",function()
        {
            tup();
        })

          //图片轮播
        function tup()
          {
      //使用全局
             timer= setInterval(() => {
                 $("#i").prop("src","/"+index+".jpg");
              //小圆点的使用
                 $(".dot").eq(index-1).addClass("active").siblings().removeClass("active");
                 index++;
                 if(index>3)
                 {
                     index=1;                     
                 }
              
           },1500); 
        
        }
                })
      
     //点击右边
         $("#z").bind("click",function()
         {
            clearInterval(timer);
             index++;

             if(index>3)
                 {
                     index=1;                     
                 }
              //   alert(index)

                 $("#i").prop("src","/"+index+".jpg");
                 $(".dot").eq(index-1).addClass("active").siblings().removeClass("active");

         })

         //点击左边
         $("#y").bind("click",function()
         {
            clearInterval(timer);
            index--;
            if(index<=0)
            {
                index=3;
            }
         //   alert(index)
            $("#i").prop("src","/"+index+".jpg");
                 $(".dot").eq(index-1).addClass("active").siblings().removeClass("active");
         })




            </script>

            
</body>
</html>